<template>
  <a-drawer
    v-model:open="visible"
    title="消息中心"
    placement="right"
    width="400"
    class="message-center-drawer"
  >
    <!-- 用户信息头部 -->
    <div class="user-header">
      <a-avatar :size="60" :src="userInfo.avatar" class="user-avatar">
        {{ userInfo.nickname }}
      </a-avatar>
      <div class="user-info">
        <div class="user-nickname">{{ userInfo.nickname }}</div>
        <div class="user-role">{{ userInfo.role }}</div>
      </div>
    </div>

    <!-- 消息分类标签 -->
    <div class="message-tabs">
      <a-tabs v-model:activeKey="activeTab" centered>
        <a-tab-pane key="messages">
          <template #tab>
            <span class="tab-title">
              消息
              <a-badge v-if="unreadCount > 0" :count="unreadCount" class="tab-badge" />
            </span>
          </template>
          <div class="message-list">
            <div v-if="messageList.length === 0" class="empty-state">
              <div class="empty-icon">📭</div>
              <div class="empty-text">暂无系统消息</div>
            </div>
            <div
              v-for="message in messageList"
              :key="message.id"
              class="message-card"
              :class="{
                'message-unread': !isMessageRead(message?.id || 1),
                'message-read': isMessageRead(message?.id || 1)
              }"
            >
              <!-- 消息状态指示器 -->
              <div v-if="!isMessageRead(message?.id || 1)" class="message-status-indicator"></div>

              <!-- 消息头部 -->
              <div class="message-header">
                <div class="message-avatar">
                  <div class="system-icon">
                    <span class="icon-text">系</span>
                  </div>
                </div>
                <div class="message-meta">
                  <div class="message-title-wrapper">
                    <h4 class="message-title">{{ message.type || '系统通知' }}</h4>
                    <div v-if="!isMessageRead(message?.id || 1)" class="new-badge">新</div>
                  </div>
                  <div class="message-time">{{ formatDateTime(message.updateTime) }}</div>
                </div>
                <div class="message-actions">
                  <a-button
                    v-if="!isMessageRead(message?.id || 1)"
                    type="text"
                    size="small"
                    @click="markAsRead(message?.id || 1)"
                    class="read-btn"
                    title="标记为已读"
                  >
                    <CheckOutlined />
                  </a-button>
                </div>
              </div>

              <!-- 消息内容 -->
              <div class="message-body">
                <div
                  class="message-text"
                  :class="{
                    'message-text-expanded': isMessageExpanded(message?.id || 1),
                    'message-text-collapsed': !isMessageExpanded(message?.id || 1) && (message.description || '').length > 120
                  }"
                >
                  {{ message.description }}
                </div>
                <div
                  v-if="(message.description || '').length > 120"
                  class="expand-toggle"
                  @click="toggleMessageExpand(message?.id || 1)"
                >
                  <span class="expand-text">
                    {{ isMessageExpanded(message?.id || 1) ? '收起' : '展开' }}
                  </span>
                  <span class="expand-icon" :class="{ 'expanded': isMessageExpanded(message?.id || 1) }">
                    ▼
                  </span>
                </div>
              </div>


            </div>

            <!-- 消息分页组件已移至底部统一位置 -->
          </div>
        </a-tab-pane>

        <a-tab-pane key="private" tab="测试任务">
          <div class="message-list">
            <div v-if="taskList.length === 0" class="empty-state">
              <div class="empty-icon">📝</div>
              <div class="empty-text">暂无测试任务</div>
            </div>
            <div
              v-for="task in taskList"
              :key="task.id"
              class="task-card"
              :class="`task-status-${task.status}`"
            >
              <!-- 任务头部 -->
              <div class="task-header">
                <div class="task-icon-wrapper">
                  <div class="task-icon" :class="`status-${task.status}`">
                    <span v-if="task.status === 1">📋</span>
                    <span v-else-if="task.status === 2">🔒</span>
                    <span v-else-if="task.status === 3">❌</span>
                    <span v-else>📝</span>
                  </div>
                </div>
                <div class="task-title-section">
                  <h3 class="task-title">{{ task.title || '未命名练习' }}</h3>
                  <a-tag
                    :color="getStatusColor(task?.status)"
                    class="task-status-tag"
                  >
                    <span class="status-icon">●</span>
                    {{ getStatusText(task.status) }}
                  </a-tag>
                </div>
              </div>

              <!-- 任务详情 -->
              <div class="task-body">
                <div class="task-info-grid">
                  <div class="info-item" v-if="task.userName">
                    <div class="info-icon">👤</div>
                    <div class="info-content">
                      <span class="info-label">创建者</span>
                      <span class="info-value">{{ task.userName }}</span>
                    </div>
                  </div>
                  <div class="info-item" v-if="task.startTime">
                    <div class="info-icon">🕐</div>
                    <div class="info-content">
                      <span class="info-label">开始时间</span>
                      <span class="info-value">{{ formatDateTime(task.startTime) }}</span>
                    </div>
                  </div>
                  <div class="info-item" v-if="task.endTime">
                    <div class="info-icon">🕕</div>
                    <div class="info-content">
                      <span class="info-label">结束时间</span>
                      <span class="info-value">{{ formatDateTime(task.endTime) }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 任务操作 -->
              <div class="task-footer">
                <a-button
                  v-if="task.status === 1"
                  type="primary"
                  @click="startExam(task)"
                  class="task-action-btn primary-btn"
                >
                  <span class="btn-icon">▶</span>
                  开始练习
                </a-button>
                <a-button
                  v-if="task.status === 2"
                  type="default"
                  @click="viewResult(task)"
                  class="task-action-btn disabled-btn"
                  disabled
                >
                  <span class="btn-icon">🔒</span>
                  已关闭
                </a-button>
                <a-button
                  v-if="task.status === 3"
                  type="default"
                  class="task-action-btn disabled-btn"
                  disabled
                >
                  <span class="btn-icon">❌</span>
                  已取消
                </a-button>
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- 底部操作 -->
    <div class="message-footer">
      <a-button type="link" @click="markAllAsRead" class="mark-all-btn">
        <span class="btn-icon">✓</span>
        全部标记为已读
      </a-button>

      <!-- 统一分页组件 -->
      <div class="pagination-wrapper-footer">
        <!-- 消息分页器 -->
        <a-pagination
          v-if="activeTab === 'messages' && messageTotal > 0"
          v-model:current="messageParams.current"
          :total="messageTotal"
          :page-size="messageParams.pageSize"
          :show-size-changer="false"
          :show-quick-jumper="false"
          :show-total="(total) => `共 ${total} 条消息`"
          @change="handleMessagePageChange"
          class="unified-pagination"
        />
        <!-- 任务分页器 -->
        <a-pagination
          v-if="activeTab === 'private' && total > 0"
          v-model:current="taskParams.current"
          :total="total"
          :page-size="taskParams.pageSize"
          :show-size-changer="false"
          :show-quick-jumper="false"
          :show-total="(total) => `共 ${total} 个任务`"
          @change="handlePageChange"
          class="unified-pagination"
        />
      </div>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, reactive } from 'vue'
import { CheckOutlined } from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/store/user'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { listStudentClassExerciseSets } from '@/api/classesController'
import { listAMessageVoByPage } from '@/api/aMessageController'
interface Props {
  visible: boolean
}
interface Emits {
  (e: 'update:visible', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const loginUserStore = useLoginUserStore()
const router = useRouter()

const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
})

const activeTab = ref('messages')

// 测试任务列表
const taskList = ref<API.StudentExercisesSetsVO[]>([])



// 用户信息
const userInfo = computed(() => ({
  nickname: loginUserStore.loginUser.userName || '用户',
  role:
    loginUserStore.loginUser.userRole === 'admin'
      ? '管理员'
      : loginUserStore.loginUser.userRole === 'teacher'
        ? '教师'
        : '学生',
  avatar: loginUserStore.loginUser.userAvatar,
}))
/**
 * 消息相关
 */
const messageParams = reactive<API.AmessageQueryRequest>({
  current:1,
  pageSize:10
})
const messageList = ref<API.AmessageVO[]>([])
const messageTotal = ref(0)
const fetchMessageList= async (page: number = 1)=>{
  try {
    messageParams.current = page
    const res = await listAMessageVoByPage({
      ...messageParams,
      allowRole: loginUserStore.loginUser.userRole ?? "student"
    })
    if (res.data.data && res.data.code === 0) {
      messageList.value = res.data.data.records ?? []
      messageTotal.value = Number(res.data.data.total) ?? 0
    }
  } catch (e) {
    message.error("获取消息列表失败")
    console.error('获取消息列表失败:', e)
  }
}

// 处理消息分页变化
const handleMessagePageChange = (page: number) => {
  fetchMessageList(page)
}
// localStorage中已读消息的key
const READ_MESSAGES_KEY = 'message_center_read_messages'

// 已读消息ID集合
const readMessageIds = ref<Set<number>>(new Set())

// 展开的消息ID集合
const expandedMessages = ref<Set<number>>(new Set())

// 从localStorage加载已读消息ID
const loadReadMessages = () => {
  try {
    const stored = localStorage.getItem(READ_MESSAGES_KEY)
    if (stored) {
      const ids = JSON.parse(stored)
      readMessageIds.value = new Set(ids)
    }
  } catch (error) {
    console.error('加载已读消息失败:', error)
    readMessageIds.value = new Set()
  }
}

// 保存已读消息ID到localStorage
const saveReadMessages = () => {
  try {
    const ids = Array.from(readMessageIds.value)
    localStorage.setItem(READ_MESSAGES_KEY, JSON.stringify(ids))
  } catch (error) {
    console.error('保存已读消息失败:', error)
  }
}

// 检查消息是否已读
const isMessageRead = (messageId: number): boolean => {
  return readMessageIds.value.has(messageId)
}

// 获取未读消息数量
const unreadCount = computed(() => {
  return messageList.value.filter(msg => !isMessageRead(msg.id)).length
})

// 分页相关数据
const total = ref(0)
// 获取测试练习列表
const taskParams = reactive<API.PageRequest>({
  current:1,
  pageSize:2
})
const fetchTaskList = async () => {
  try {
    const res = await listStudentClassExerciseSets({
      ...taskParams
    })
    if (res.data.data && res.data.code === 0) {
      taskList.value = res.data.data.records ?? []
      total.value = Number(res.data.data.total) ?? 0
    }
  } catch (e) {
    message.error("获取测试练习列表失败")
    console.error('获取测试练习列表失败:', e)
  }
}

// 处理分页变化
const handlePageChange = (page: number) => {
  taskParams.current = page
  taskParams.pageSize = 2
  fetchTaskList()
}


// 获取状态颜色
const getStatusColor = (status: number): string => {
  switch (status) {
    case 1:
      return 'success' // 已发布
    case 2:
      return 'default' // 已关闭
    case 3:
      return 'error' // 已取消
    default:
      return 'default'
  }
}

// 获取状态文本
const getStatusText = (status: number): string => {
  switch (status) {
    case 1:
      return '已发布'
    case 2:
      return '已关闭'
    case 3:
      return '已取消'
    default:
      return '未知'
  }
}

// 格式化日期时间
const formatDateTime = (dateString: string): string => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 开始测试
const startExam = async (exam: API.StudentExercisesSetsVO) => {
  try {
    visible.value = false // 关闭消息中心
    await router.push(`/student/do_exam?setId=${exam.id}&mode=start`)
  } catch (e) {
    message.error('跳转失败')
  }
}

// 查看结果
const viewResult = async (exam: API.StudentExercisesSetsVO) => {
  try {
    visible.value = false // 关闭消息中心
    await router.push(`/student/do_exam?examId=${exam.id}&mode=result`)
  } catch (e) {
    message.error('跳转失败')
  }
}

// 标记消息为已读
const markAsRead = (messageId: number) => {
  readMessageIds.value.add(messageId)
  saveReadMessages()
  message.success('消息已标记为已读')
}

// 切换消息展开状态
const toggleMessageExpand = (messageId: number) => {
  if (expandedMessages.value.has(messageId)) {
    expandedMessages.value.delete(messageId)
  } else {
    expandedMessages.value.add(messageId)
  }
}

// 检查消息是否展开
const isMessageExpanded = (messageId: number) => {
  return expandedMessages.value.has(messageId)
}

// 标记全部为已读
const markAllAsRead = () => {
  if (activeTab.value === 'messages') {
    messageList.value.forEach(msg => {
      readMessageIds.value.add(msg.id)
    })
    saveReadMessages()
    message.success('所有消息已标记为已读')
  } else {
    message.info('测试任务消息无需手动标记已读')
  }
}

// 组件挂载时获取数据
onMounted(() => {
  loadReadMessages()
  fetchTaskList()
  fetchMessageList()
})
</script>

<style scoped>
.message-center-drawer {
  :deep(.ant-drawer-header) {
    background: linear-gradient(135deg, #20a1da 0%, #30a4ad 100%);
    color: white;
    border-bottom: none;
  }

  :deep(.ant-drawer-title) {
    color: white;
    font-weight: 600;
  }

  :deep(.ant-drawer-close) {
    color: white;
  }
}

.user-header {
  display: flex;
  align-items: center;
  padding: 24px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  margin: -24px -24px 24px -24px;
  padding-left: 24px;
  padding-right: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.user-avatar {
  background: linear-gradient(135deg, #20a1da 0%, #30a4ad 100%);
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(32, 161, 218, 0.3);
  border: 3px solid white;
}

.user-info {
  margin-left: 16px;
  flex: 1;
}

.user-nickname {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #20a1da 0%, #30a4ad 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.user-role {
  font-size: 12px;
  color: #666;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  padding: 4px 12px;
  border-radius: 16px;
  display: inline-block;
  font-weight: 500;
  border: 1px solid #e0e0e0;
}

.message-tabs {
  :deep(.ant-tabs-tab) {
    font-size: 16px;
    font-weight: 500;
  }

  :deep(.ant-tabs-tab-active) {
    color: #20a1da;
  }

  :deep(.ant-tabs-ink-bar) {
    background: #20a1da;
  }
}

.message-list {
  max-height: 400px;
  overflow-y: auto;
}

.message-card {
  background: white;
  border-radius: 16px;
  margin-bottom: 16px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;

  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    border-color: #e6f7ff;
  }

  &.message-unread {
    background: linear-gradient(135deg, #f6ffed 0%, #f0f9ff 100%);
    border-left: 5px solid #52c41a;
    box-shadow: 0 4px 16px rgba(82, 196, 26, 0.15);

    &:hover {
      box-shadow: 0 8px 32px rgba(82, 196, 26, 0.25);
      transform: translateY(-3px);
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
    }
  }

  &.message-read {
    background: #fafafa;
    opacity: 0.9;
    border-left: 5px solid #d9d9d9;

    .message-title {
      color: #8c8c8c;
    }

    .message-text {
      color: #bfbfbf;
    }

    &:hover {
      opacity: 1;
      background: #f5f5f5;
    }
  }
}

/* 消息状态指示器 */
.message-status-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  z-index: 1;
}

/* 消息头部 */
.message-header {
  display: flex;
  align-items: flex-start;
  padding: 20px 24px 16px;
  gap: 16px;
}

.message-avatar {
  flex-shrink: 0;
}

.system-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
  transition: all 0.3s ease;

  .icon-text {
    font-size: 16px;
    font-weight: 700;
  }

  &:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
  }
}

.message-meta {
  flex: 1;
  min-width: 0;
}

.message-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.message-title {
  font-size: 15px;
  font-weight: 600;
  color: #262626;
  margin: 0;
  line-height: 1.4;
}

.new-badge {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(255, 77, 79, 0.3);
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.message-time {
  font-size: 12px;
  color: #8c8c8c;
  font-weight: 500;
}

/* 消息主体 */
.message-body {
  padding: 0 24px 20px;
}

.message-text {
  font-size: 14px;
  color: #595959;
  line-height: 1.7;
  word-break: break-word;
  white-space: pre-wrap;
  transition: all 0.3s ease;
  margin-bottom: 8px;

  &.message-text-collapsed {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 4.2em; /* 约3行的高度 */
  }

  &.message-text-expanded {
    max-height: none;
    overflow: visible;
  }
}

.expand-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #1890ff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  transition: all 0.3s ease;
  user-select: none;

  &:hover {
    color: #40a9ff;
    transform: translateX(2px);
  }

  .expand-text {
    font-weight: 600;
  }

  .expand-icon {
    font-size: 10px;
    transition: transform 0.3s ease;
    transform-origin: center;

    &.expanded {
      transform: rotate(180deg);
    }
  }
}

/* 消息底部 */
.message-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid #f0f0f0;
  background: rgba(82, 196, 26, 0.02);
  margin-top: 8px;
}


@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.message-footer {
  position: absolute;
  bottom: 20px;
  left: 6px;
  right: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  background: white;
}

.mark-all-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1890ff;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    color: #40a9ff;
    transform: translateY(-1px);
  }

  .btn-icon {
    font-size: 14px;
    font-weight: bold;
  }
}

.pagination-wrapper-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  transition: all 0.3s ease;

  /* 当没有分页器时隐藏容器 */
  &:empty {
    min-height: 0;
    padding: 0;
  }
}

/* 统一分页器样式 */
.unified-pagination {
  :deep(.ant-pagination-item) {
    min-width: 32px;
    height: 32px;
    line-height: 30px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    margin: 0 4px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;

    &:hover {
      border-color: #40a9ff;
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(64, 169, 255, 0.15);
    }

    &.ant-pagination-item-active {
      background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
      border-color: #1890ff;
      color: white;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
    }
  }

  :deep(.ant-pagination-prev),
  :deep(.ant-pagination-next) {
    min-width: 32px;
    height: 32px;
    line-height: 30px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    margin: 0 4px;
    transition: all 0.3s ease;

    &:hover {
      border-color: #40a9ff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(64, 169, 255, 0.2);

      .anticon {
        color: #40a9ff;
      }
    }

    .anticon {
      color: #595959;
      transition: color 0.3s ease;
    }
  }

  :deep(.ant-pagination-disabled) {
    opacity: 0.5;
    cursor: not-allowed;

    &:hover {
      border-color: #d9d9d9;
      transform: none;
      box-shadow: none;

      .anticon {
        color: #bfbfbf;
      }
    }
  }

  :deep(.ant-pagination-total-text) {
    color: #8c8c8c;
    font-size: 13px;
    font-weight: 500;
    margin-right: 16px;
  }
}

.message-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.read-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(82, 196, 26, 0.1);
  border: 1px solid rgba(82, 196, 26, 0.2);
  color: #52c41a;
  transition: all 0.3s ease;
  font-size: 14px;

  &:hover {
    background: #52c41a;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
    border-color: #52c41a;
  }

  &:active {
    transform: translateY(0);
  }
}

.tab-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-badge {
  :deep(.ant-badge-count) {
    background: #ff4d4f;
    box-shadow: 0 0 0 1px #fff;
  }
}

:deep(.ant-tabs-content-holder) {
  padding-bottom: 80px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
  color: #999;
}

/* 测试任务卡片样式 */
.task-card {
  background: white;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  overflow: hidden;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }

  &.task-status-1 {
    border-left: 4px solid #52c41a;

    .task-header {
      background: linear-gradient(135deg, #f6ffed 0%, #f0f9ff 100%);
    }
  }

  &.task-status-2 {
    border-left: 4px solid #faad14;

    .task-header {
      background: linear-gradient(135deg, #fffbe6 0%, #fff7e6 100%);
    }
  }

  &.task-status-3 {
    border-left: 4px solid #ff4d4f;

    .task-header {
      background: linear-gradient(135deg, #fff2f0 0%, #fff1f0 100%);
    }
  }
}

.task-header {
  display: flex;
  align-items: center;
  padding: 16px 20px 12px;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  border-bottom: 1px solid #f0f0f0;
}

.task-icon-wrapper {
  margin-right: 16px;
}

.task-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;

  &.status-1 {
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  }

  &.status-2 {
    background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
  }

  &.status-3 {
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  }
}

.task-title-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  line-height: 1.4;
}

.task-status-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  border: none;

  .status-icon {
    font-size: 8px;
    animation: pulse 2s infinite;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.task-body {
  padding: 16px 20px;
}

.task-info-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.info-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: #f8f9fa;
  border-radius: 6px;
  flex-shrink: 0;
}

.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-label {
  font-size: 12px;
  color: #8c8c8c;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 14px;
  color: #262626;
  font-weight: 500;
}

.task-footer {
  padding: 12px 20px 16px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
}

.task-action-btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  border: none;

  .btn-icon {
    font-size: 12px;
  }

  &.primary-btn {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
    }
  }

  &.disabled-btn {
    background: #f5f5f5;
    color: #bfbfbf;
    cursor: not-allowed;

    .btn-icon {
      opacity: 0.6;
    }
  }
}

/* 分页组件样式 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 24px 20px 16px;
  margin-top: 16px;
  border-top: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
}

.task-pagination {
  :deep(.ant-pagination-item) {
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: white;
    transition: all 0.3s ease;
    font-weight: 500;

    &:hover {
      border-color: #40a9ff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(64, 169, 255, 0.2);
    }

    a {
      color: #595959;
      transition: color 0.3s ease;

      &:hover {
        color: #40a9ff;
      }
    }
  }

  :deep(.ant-pagination-item-active) {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);

    a {
      color: white;
      font-weight: 600;

      &:hover {
        color: white;
      }
    }
  }

  :deep(.ant-pagination-prev),
  :deep(.ant-pagination-next) {
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: white;
    transition: all 0.3s ease;

    &:hover {
      border-color: #40a9ff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(64, 169, 255, 0.2);

      .anticon {
        color: #40a9ff;
      }
    }

    .anticon {
      color: #595959;
      transition: color 0.3s ease;
    }
  }

  :deep(.ant-pagination-disabled) {
    opacity: 0.5;
    cursor: not-allowed;

    &:hover {
      border-color: #d9d9d9;
      transform: none;
      box-shadow: none;

      .anticon {
        color: #bfbfbf;
      }
    }
  }

  :deep(.ant-pagination-total-text) {
    color: #8c8c8c;
    font-size: 13px;
    font-weight: 500;
    margin-right: 16px;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .message-center-drawer {
    :deep(.ant-drawer) {
      width: 100% !important;
    }
  }

  .user-header {
    padding: 16px 0;
  }

  .user-avatar {
    width: 50px !important;
    height: 50px !important;
  }

  .user-nickname {
    font-size: 16px;
  }

  .message-card {
    margin-bottom: 12px;
    border-radius: 12px;
  }

  .message-header {
    padding: 16px 20px 12px;
    gap: 12px;
  }

  .system-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;

    .icon-text {
      font-size: 15px;
    }
  }

  .message-title {
    font-size: 14px;
  }

  .message-body {
    padding: 0 20px 16px;
  }

  .message-text {
    font-size: 13px;
    line-height: 1.6;

    &.message-text-collapsed {
      max-height: 3.6em; /* 移动端稍微减少行高 */
    }
  }

  .message-time {
    font-size: 11px;
  }

  .message-footer {
    padding: 12px 20px 16px;
    margin-top: 6px;
  }

  .new-badge {
    font-size: 9px;
    padding: 2px 5px;
  }

  .read-btn {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .expand-toggle {
    font-size: 11px;
    padding: 6px 0;
  }

  .pagination-wrapper {
    padding: 16px 12px 12px;
  }

  .message-footer {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .unified-pagination {
    :deep(.ant-pagination-item),
    :deep(.ant-pagination-prev),
    :deep(.ant-pagination-next) {
      min-width: 28px;
      height: 28px;
      line-height: 26px;
      font-size: 12px;
    }

    :deep(.ant-pagination-total-text) {
      font-size: 12px;
      margin-right: 8px;
    }
  }
}
</style>
